/*
 * @Date: 2023-08-03 09:26:49
 * @LastEditors: zhangsongwei
 * @LastEditTime: 2023-08-05 22:25:33
 * @FilePath: /z/src/components/customerMenu.tsx
 * @description:
 */
import React, { useEffect, useMemo } from "react";
import { Input, Menu } from "antd";
import { getMenuList } from "../urls/p";

const { Search } = Input;

interface CusSearchProps {
  onTextChange?: (e: string) => void;
}

export default ({ onTextChange }: CusSearchProps) => {
  const [dataList, setDataList] = React.useState<any[]>([{}]);
  const [searchWord, setSearchWord] = React.useState("");

  const requestData = async () => {
    const res = await getMenuList(searchWord);
    setDataList(res.info || []);
  };

  useEffect(() => {
    requestData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchWord]);

  const onSearch = (v: string) => {
    setSearchWord(v.trim());
    onTextChange && onTextChange(v.trim());
  };
  const onChange = (v: any) => {
    // TODO DEL
    console.log("zz=del=info======>v", v);
    console.log("zz=del=info======>v", v.nativeEvent);
    // setSearchWord(v)
  };

  return (
    <div>
      <Search placeholder={searchWord} onSearch={onSearch} enterButton />

      <Menu mode="inline" theme="dark" selectable={false}>
        {dataList.map((e) => {
          return (
            <Menu.Item key={e.menuName}>
              <span>{e.menuName}</span>
            </Menu.Item>
          );
        })}
      </Menu>
    </div>
  );
};
